<template>
    <view class="cateContainer">
        <!--复用 搜索组件 -->
        <mySearch id="mySearch" v-if="searchShow"></mySearch>

        <!--容器盒子 -->
        <view class="boxContainer" :style="'height:'+(wh-searchHeight)+'px'">
            <!-- 左侧  分类栏-->
            <scroll-view class="nav" scroll-y="true">
                <view @click="changeActive(item)" :class="{active:activeCate.id===item.id}" v-for="item in categoryList"
                    :key="item.id">
                    {{item.name}}
                </view>
            </scroll-view>

            <!-- 右侧 商品展示-->
            <view class="cate">
                <!-- 分类图片-->
                <image :src="activeCate.img_url" class="cateImg" mode=""></image>
                <!-- 滚动容器，商品列表-->
                <scroll-view @scrolltolower="loadMore()" class="listBox" scroll-y="true"
                    :style="'height:'+(wh-searchHeight-imgHeight)+'px'">
                    <!-- 复用商品组件-->
                    <goodList v-if="list.length" :list="list"></goodList>
                    <!-- 列表活动到底部触发，-->
                    <u-loadmore v-if="list.length" :status="status"></u-loadmore>
                    <!-- 数据为空的状态-->
                    <u-empty v-if="list.length===0" mode="list" marginTop="200rpx">
                    </u-empty>

                </scroll-view>

            </view>
        </view>
    </view>
</template>

<script>
    import setBadge from '@/mixins/setBadge.js'
    export default {
        mixins: [setBadge],
        data() {
            return {
                searchShow: false, //控制搜索组件的显示
                wh: 0, //窗口高度
                searchHeight: 0, //搜索框的高度
                imgHeight: 0, //分类图片的高度
                categoryList: [], //分类栏数据
                activeCate: {}, //高亮（激活）的分类信息
                count: 0, //商品总数
                currentPage: 1, //页码
                pageSize: 8, //每页数量
                list: [], //商品列表
                status: 'loadmore', //组件的状态，加载前为loadmore，加载中为loading，没有数据为nomore
            };
        },
        //mounted钩子函数，最先关注到DOM节点，在组件被挂载之后调用。
        mounted() {
            //1.获取窗口高度
            uni.getSystemInfo({
                success: (res) => {
                    // console.log(res);
                    this.wh = res.windowHeight
                }
            })
            //2.获取搜索组件的高度
            //先获取DOM节点，然后获取节点信息
            const query = uni.createSelectorQuery().in(this)
            //节点.select('选择器').boundingClientRect(回调函数).exec()
            query.select('#mySearch').boundingClientRect(res => {
                //res包含该节点的位置和高度信息
                // console.log(res);
                this.searchHeight = res.height

            }).exec()
            //3.获取分类图片的高度
            query.select('.cateImg').boundingClientRect(res => {
                // console.log(res);
                this.imgHeight = res.height
            }).exec()


        },
        methods: {
            //1.获取左侧分类栏数据
            async getAllCate() {
                const res = await uni.$http.get('/catalog/index')
                this.categoryList = res.categoryList
                //拿到分类数据的第一条数据，当做默认高亮的分类信息
                //就判断categoryList有没有数据
                if (this.categoryList.length) {
                    //拿到本地的分类id
                    const cateId = uni.getStorageSync('cateId')
                    if (cateId) {
                        //找到id相同的分类数据
                        let newCateList = this.categoryList.find(item => item.id === cateId)
                        //调用切换分类的方法，重新获取数据
                        this.changeActive(newCateList)
                    } else {
                        //没有本地的分类id就默认显示第一条数据
                        this.activeCate = this.categoryList[0]
                        //发送请求，获取当前分类商品的数据
                        this.getGoodList()
                    }
                }
            },
            //2.获取右边商品列表数据
            async getGoodList() {
                //一开始还没有数据取数据，显示加载中
                this.status = 'loading'

                const res = await uni.$http.post('/catalog/currentlist', {
                    id: this.activeCate.id,
                    page: this.currentPage,
                    size: this.pageSize
                })
                // console.log(res);
                this.list = [...this.list, ...res.data] //不能直接赋值，要保留原有的数据
                this.count = res.count

                //判断数据加载是否结束
                if (this.list.length === this.count) {
                    //说明所有数据都加载了，没有更多数据了
                    this.status = 'nomore'
                } else {
                    //说明还有数据，可以加载更多
                    this.status = 'loadmore'
                }
            },
            //3.滚动加载更多数据(高亮的分类数据，滑动到底部的时候触发)
            loadMore() {

                if (this.status !== 'loadmore') return
                //走到这里说明还有更多数据可以加载
                this.currentPage++
                //再次发请求，获取当前分类的商品数据
                this.getGoodList()
            },
            //4.切换分类列表，修改高亮列表
            changeActive(cateItem) {
                // console.log(cateItem);
                //高亮
                this.activeCate = cateItem
                //重新定义列表数据
                this.count = 0
                this.list = []
                this.status = 'loadmore'
                this.currentPage = 1
                //重新获取列表数据
                this.getGoodList()
            }
        },
        //页面打开
        onShow() {
            //页面每次打开的时候都要重新计算
            this.searchShow = true
            //发送请求，获取分类栏的数据
            this.getAllCate()



        },
        //页面关闭
        onHide() {
            this.searchShow = false
            //清除本地的分类id,这样就可以有默认显示的页面
            uni.removeStorageSync('cateId')
        }
    }
</script>

<style lang="scss">
    .cateContainer {
        width: 100vw;
        height: 100vh;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        overflow: hidden;

        .boxContainer {
            display: flex;
            flex: 1;

            .nav {
                width: 180rpx;
                border-right: 1rpx solid #fafafa;
                height: 100%;

                view {
                    line-height: 100rpx;
                    text-align: center;
                    color: #333;
                    font-size: 30rpx
                }

                .active {
                    color: #409eff;
                    font-size: 32rpx
                }
            }

            .cate {
                flex: 1;
                padding: 0 20rpx;
                height: 100%;
                flex-direction: column;

                .cateImg {
                    width: 100%;
                    height: 160rpx;
                }

                .listBox {
                    flex: 1;
                }
            }
        }
    }
</style>
